<template>
	<view class="detail-wrap">
		<DetailHeader title="议案动态详情"></DetailHeader>
		<view class="tips">
			张三领衔提出“关于增加养老福利的建议”
		</view>
		<view class="steps">
			<!-- // 代码位于 uni_modules/lime-steps/compoents/lime-steps -->
			<!-- <lime-steps /> -->
			<l-steps :current="current" @change="change" layout="vertical" finishBgColor="#43B077"
				activeColor="#43B077">
				<l-step :title="item.title" v-for="(item,index) in list2" :key="index">
					<template #icon>
						<view class="success_icon01" v-if="index==current">
							<!-- <image src="/static/steps-item-icon01.png" mode=""></image> -->
							√
						</view>
						<view class="success_icon02" v-if="index<current">
							<!-- <image src="/static/steps-item-icon01.png" mode=""></image> -->
							√
						</view>
						<view class="success_icon03" v-if="index>current">
							<!-- <image src="/static/steps-item-icon01.png" mode=""></image> -->
							√
						</view>
					</template>
				</l-step>
				<!-- <l-step title="商家接单" ></l-step>
			    <l-step title="买家提货" ></l-step>
			    <l-step title="交易完成" ></l-step> -->
			</l-steps>


		</view>
	</view>
</template>

<script>
	import DetailHeader from '@/components/nacigation/DetailHeader.vue';
	export default {
		components: {
			DetailHeader,
		},
		data() {
			return {
				current: 1,
				list2: [{
					title: '提交',
				}, {
					title: '核校',
				}, {
					title: '分类',
				}, {
					title: '初审',
				}, {
					title: '复审',
				}, {
					title: '分办',
				}, {
					title: '签收',
				}, {
					title: '答复',
				}, {
					title: '评价',
				}, {
					title: '已办结',
				}]
			}
		},
		methods: {
			iconClick() {},
			change() {}
		}
	};
</script>

<style scoped lang="scss">
	.detail-wrap {
		.tips {
			height: 90rpx;
			background: #F7F7F7;
			padding: 18rpx 36rpx;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			line-height: 55rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #F22C1F;
			text-align: left;
			font-style: normal;
			text-transform: none;
		}

		.steps {
			padding: 16rpx 40rpx;

			.success_icon01 {
				width: 64rpx;
				height: 64rpx;
				border-radius: 32rpx;
				background-color: #43B077;
				color: #ffffff;
				font-size: 29rpx;
				text-align: center;
				line-height: 64rpx;
			}

			.success_icon02 {
				width: 64rpx;
				height: 64rpx;
				border-radius: 32rpx;
				background-color: #FE7038;
				color: #ffffff;
				font-size: 29rpx;
				text-align: center;
				line-height: 64rpx;
			}

			.success_icon03 {
				border-radius: 32rpx;
				width: 64rpx;
				height: 64rpx;
				background-color: #E5E5E5;
				color: #ffffff;
				font-size: 29rpx;
				text-align: center;
				line-height: 64rpx;
			}
		}

		::v-deep .l-step__title--vertical {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: rgba(0, 0, 0, 0.85);
			line-height: 48rpx;
			text-align: left;
			font-style: normal;
			text-transform: none;
			padding-bottom: 54rpx;
		}

		::v-deep .l-step__line--vertical {
			width: 8rpx;
			border-radius: 4rpx;
		}

	}
</style>